<template>
<view>

<view class="container">
	<view class="swiper_wrapper">
	    <swiper :autoplay="true" @change="bannerSwiperChange" :circular="true" :duration="500" :indicatorDots="false" :interval="5000" v-if="bannerList">
	        <swiper-item v-for="(item, idx) in bannerList" :key="idx" @tap="commonDealFun" :data-link-login="item.url_islogin" :data-link-url="item.url">
	            <image mode="scaleToFill" :src="item.thumb"></image>
	        </swiper-item>
	    </swiper>
	    <view class="swiper_dots flex">
	        <view v-for="(item, idx) in bannerList" :key="idx" :class="'dot_item' + (idx===bannerSwiperCurr?' active':'')">
	            <image src="/static/images/swiper_dot.png" v-if="idx===bannerSwiperCurr"></image>
	        </view>
	    </view>
	</view>
	<view class="number-people">
		<view class="number-box">
			<view class="number">{{activityCount}}</view>
			<view class="unit">实践活动场次</view>
		</view>
		<view class="number-box">
			<view class="number">{{activityVolunteerCount}}</view>
			<view class="unit">活动参与人数</view>
		</view>
	</view>

	
    <view class="nav_wrapper" :style="'min-height: ' + (tool.lengthNum( navList[0] )>4?'336':'168') + 'rpx;'" v-if="tool.length(navList)">
        <swiper :autoplay="false" @change="navSwiperChange" :circular="false" :duration="500" :indicatorDots="false" :interval="5000" :style="'height: ' + (tool.lengthNum( navList[0] )>4?'294':'147') + 'rpx;'">
            <swiper-item v-for="(item, idx) in navList" :key="idx" class="flex">
                <view v-for="(subItem, subIdx) in item" :key="subIdx" @tap="commonDealFun" class="nav_item" :data-link-login="subItem.url_islogin" :data-link-url="subItem.url" :data-need-login="subItem.needLogin">
                    <image mode="scaleToFill" :src="subItem.thumb"></image>
                    <view>{{subItem.title}}</view>
                </view>
            </swiper-item>
        </swiper>
        <view class="swiper_dots flex" v-if="navList.length>1">
            <view v-for="(item, idx) in navList" :key="idx" :class="'dot_item' + (idx===navSwiperCurr?' active':'')">
                <image src="/static/images/swiper_dot.png" v-if="idx===navSwiperCurr"></image>
            </view>
        </view>
    </view>


	
	
    <view class="ads_wrapper" v-if="adsList.length">
        <view v-for="(item, idx) in adsList" :key="idx" @tap="commonDealFun" class="ads_item" :data-link-login="item.url_islogin" :data-link-url="item.url">
            <image mode="scaleToFill" :src="item.thumb"></image>
        </view>
    </view>
    <view class="split"></view>
    <view class="choice_wrapper" v-if="choiceList.length">
        <view class="sec_title flex">
            <image src="/static/images/icon_title.png"></image>
            <view class="title">精选</view>
        </view>
        <view class="choice_sec flex">
		<!-- 	<view class="choice-box" v-for="(item, idx) in choiceList" :key="idx" @tap="commonDealFun" :data-link-login="item.url_islogin" :data-link-url="item.url" :style="'background-color:' + item.backgroundColor">
				<view class="title">{{ item.title }}</view>
			</view> -->

           <view v-for="(item, idx) in choiceList" :key="idx" @tap="commonDealFun" class="choice_item" :data-link-login="item.url_islogin" :data-link-url="item.url">
                <image mode="scaleToFill" :src="item.thumb"></image>
            </view>
        </view>
    </view>
	
	
	<view class="split"></view>
	
	<view class="new-list">
		<view class="news-more" @tap="goNewsList">
			<view>更多</view>
            <image mode="scaleToFill" src="/static/images/icon_more.png"></image>
		</view>
		<v-tabs v-model="currentNewsIndex"
		 :tabs="newsDisplayTypes"
		 activeColor="#000"
		 lineColor="#24cba9"
		 lineHeight="5rpx"
		 :lineScale="0.3"
		 fontSize="34rpx"
		  @change="changeTab"
		  ></v-tabs>
		  <view class="news-box" v-for="(item, idx) in newsList" :key="idx" @tap="tabNews" :data-id="item.id">
			  <image class="cover" :src="imageUrl(item.imageUrl)"></image>
			  <view class="news-info">
				  <view class="title">{{item.title}}</view>
				  <view class="meta">
					  <image src="/static/images/new-hits.png"></image>
					  <view>{{ item.hit }}</view>
					  <view>{{ formatTimeTwo(new Date(item.createTime), 'M月D日 h:m') }}</view>
				  </view>
			  </view>
		  </view>
	</view>
	
    <view class="split"></view>
    <view class="recruit_wrapper" v-if="actList.length>0">
        <view class="sec_title flex">
            <image src="/static/images/icon_title.png"></image>
            <view class="title">最新招募</view>
            <view @tap="toRecruit" class="more flex">
                <view>更多</view>
                <image mode="scaleToFill" src="/static/images/icon_more.png"></image>
            </view>
        </view>
        <view class="recruit_sec flex">
            <view v-for="(item, idx) in actList" :key="idx" @tap="toDetail" class="recruit_item flex" :data-recruit-id="item.id">
                <image class="thumb" mode="aspectFill" :src="item.thumb"></image>
                <view class="desc">
                    <view class="title">{{item.title}}</view>
                    <view class="tags flex">
                        <view class="tag distance">
                            <image src="/static/images/icon_rec_distance.png"></image>
                            <view>{{item.distance}}km</view>
                        </view>
                        <view class="tag locate">
                            <image src="/static/images/icon_rec_location.png"></image>
                            <view>{{item.city}}</view>
                        </view>
                        <view class="tag amt">
                            <image src="/static/images/icon_rec_amt.png"></image>
                            <view>{{item.bnum}}/{{item.need}}人</view>
                        </view>
                        <view class="tag timeline">
                            <image src="/static/images/icon_rec_timeline.png"></image>
                            <view>{{item.lastTime}}</view>
                        </view>
                    </view>
                    <view class="org_name flex">
                        <image mode="scaleToFill" src="/static/images/defaultorg.png"></image>
                        <view>{{item.detailAddress}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>
</view>
</template>

<script module="tool" lang="wxs" src="../../utils/tools.wxs"></script>

<script>
	import {getNewsTypes, fetchNewsList} from '../../api/news.js'
	import {appInfo} from '../../api/common.js'
	import {imageUrl, formatTimeTwo} from '../../utils/util.js'
	const app = getApp()

var t,
    e = function () {
  function t(t, e) {
    var a = [],
        i = !0,
        n = !1,
        r = void 0;

    try {
      for (var o, s = t[Symbol.iterator](); !(i = (o = s.next()).done) && (a.push(o.value), !e || a.length !== e); i = !0);
    } catch (t) {
      n = !0, r = t;
    } finally {
      try {
        !i && s.return && s.return();
      } finally {
        if (n) throw r;
      }
    }

    return a;
  }

  return function (e, a) {
    if (Array.isArray(e)) return e;
    if (Symbol.iterator in Object(e)) return t(e, a);
    throw new TypeError("Invalid attempt to destructure non-iterable instance");
  };
}(),
    a = require("../../utils/config.js"),
    i = require("../../utils/util.js"),
    n = require("../../utils/request.js"),
    r = function (t) {
  return t && t.__esModule ? t : {
    default: t
  };
}(require("../../utils/api.js")),
    s = a.config.defaultCityId,
		host = a.config.host,
    c = r.default.getCityId,
    l = r.default.volunteerCount,
    u = r.default.indexApi,
    d = r.default.recruitList,
    g = r.default.cityTrans,
    h = require("../../utils/qqmap-wx-jssdk.min.js"),
    f = null;

export default {
  data() {
    return {
      cityName: "",
      cityId: "",
      volsCount: 0,
      displayNumArr: [],
      bannerSwiperCurr: 0,
      bannerList: [],
      navSwiperCurr: 0,
      navList: [],
      adsList: [],
      actList: [],
      noMore: !1,
      page: 1,
      transProvince: "",
      transCity: "",
      transCounty: "",
      tabbar: "",
      choiceList: [],
	  currentNewsIndex: 0,
	  newsDisplayTypes: [],
	  newsTypes: [],
	  newsList: [],
	  activityCount: 0,
	  activityVolunteerCount: 0
    };
  },

  components: {
  
  },
  props: {},
  onLoad: function (e) {
    // uni.createInterstitialAd && ((f = uni.createInterstitialAd({
    //   adUnitId: "adunit-c3a72532a69ae26d"
    // })).onLoad(function () {
    //   console.log("onLoad event emit");
    // }), 
	
	// f.onError(function (t) {
 //      console.log("onError event emit", t);
 //    }), f.onClose(function (t) {
 //      console.log("onClose event emit", t);
 //    })), 


	
    /* try {
      var a = uni.getStorageSync("cityType");
      "selected" === a ? (this.setData({
        cityName: app.globalData.cityName,
        cityId: app.globalData.cityId
      }), this.getPageData()) : "none" === a ? this.getUserLocation() : "gps" === a && (this.setData({
        cityName: app.globalData.gpsCityName,
        cityId: app.globalData.gpsCityId
      }), this.getPageData());
    } catch (t) {
      console.log(t);
    } */

     /* e.recruitId && uni.navigateTo({
      url: "/pages/act/detail?id=" + e.recruitId
    }), e.orgId && uni.navigateTo({
      url: "/pages/org/detail?id=" + e.orgId
    }); */
	this.getUserLocation()
	
	this._initNews();
	this._initAppInfo();
  },
  onShow: function () {
    // f.show().catch(function (t) {
    //   console.error(t);
    // });
	/* var userInfo = uni.getStorageSync("userInfo")
	if(userInfo){
		this.setData({userInfo:userInfo,loginFlag:1})
		app.globalData.zyzId = userInfo.id
		return
	} */
  },
  onReady: function () {},
  onPullDownRefresh: function () {
    this.setData({
      page: 1,
      noMore: !1
    }), this.getPageData("refresh");
  },
  onReachBottom: function () {
    var t = this;

    if (console.log("reachBottom"), !this.noMore) {
      var e = this.page;
      this.setData({
        page: ++e
      });
	  this.getPageData()
    }
  },
  onShareAppMessage: function () {
    return {
      title: "让公益更生活 让生活更公益",
      path: "/pages/index/index",
      imageUrl: "/static/images/zyh_logo.jpg"
    };
  },
  methods: {
	  formatTimeTwo,
	  imageUrl,
	  _initAppInfo() {
		appInfo().then(result=>{
			this.setData({...result.data})
		})  
	  },
	  goNewsList() {
		uni.navigateTo({
			url: '/pages/news/list'
		})  
	  },
	  tabNews(e) {
		const { id } = e.currentTarget.dataset
		uni.navigateTo({
			url:`/pages/news/detail?id=${id}`
		});
	  },
	  _initNews() {
		getNewsTypes().then(result=>{
				 let newsDisplayTypes = [];
				 result.data.forEach(item=>{
					 newsDisplayTypes.push(item.value)
				 })
				 let newsTypes = result.data
				 this.setData({newsDisplayTypes, newsTypes})
				 this.initNewlist();
		});
	  },
	  initNewlist() {
		  let type = this.newsTypes[this.currentNewsIndex].code
		  fetchNewsList({type, pageSize: 2}).then(result=>{
			  this.setData({newsList: result.data.rows})
		  })
	  },
	changeTab(index) {
	   this.setData({currentNewsIndex: index})
	   this.initNewlist()
	},
    bannerSwiperChange: function (t) {
      this.setData({
        bannerSwiperCurr: t.detail.current
      });
    },
    navSwiperChange: function (t) {
      this.setData({
        navSwiperCurr: t.detail.current
      });
    },
    commonDealFun: function (t) {
      var e = app.globalData.loginFlag,
          a = t.currentTarget.dataset,
          i = a.linkUrl,
          n = a.linkLogin;
			if (a.needLogin && !app.globalData.zyzId) {
				uni.navigateTo({
					url:"/pages/entry/login"
				});
			} else {
				i && (e && i.indexOf("/entry/register") > -1 ? uni.showToast({
				  title: "您已经是人人志愿用户",
				  icon: "none"
				}) : 1 != n || e ? i.indexOf("https://") > -1 || i.indexOf("http://") > -1 ? uni.navigateTo({
				  url: "/pages/tmp/webview?linkUrl=" + encodeURIComponent(i) + "&linkLogin=" + n
				}) : uni.navigateTo({
				  url: "" + i
				}) : uni.navigateTo({
				  url: "/pages/entry/login"
				}));
			}
      
    },
    toLocate: function () {
      uni.navigateTo({
        url: "/pages/locate/locate?gps=" + app.globalData.gpsSet
      });
    },
    toDetail: function (t) {
      uni.navigateTo({
        url: "/pages/act/detail?id=" + t.currentTarget.dataset.recruitId
      });
    },
    getUserLocation: function () {
      var t = this;
      uni.getLocation({
		  type: 'gcj02',
		  altitude: true,	
        success: function (e) {console.log(e)
          var a = e.latitude,i = e.longitude
			/*  wx.showToast({
			  	title:e.latitude+","+e.longitude
			  })
					uni.openLocation({
						latitude:a,
						longitude:i
					}) */
          app.globalData.latitude = a;
		  app.globalData.longitude = i;
					t.getPageData()
        },
        fail: function (e) {
         console.log(e)
        }
      });
    },
    reverseGeocoder: function (e, a) {
      var i = this;
      t.reverseGeocoder({
        location: {
          latitude: e,
          longitude: a
        },
        coord_type: 1,
        success: function (t) {
          0 === t.status && (app.globalData.gpsCityName = t.result.address_component.city, uni.setStorage({
            key: "cityType",
            data: "gps",
            success: function () {
              try {
                uni.setStorageSync("gpsFlag", "gps");
              } catch (t) {
                console.log(t);
              }
            }
          }), i.setData({
            cityName: t.result.address_component.city
          }), i.getPageData());
        },
        fail: function (t) {
          console.log(t);
        }
      });
    },
    getCityIdRequest: function (t) {
      var e = this,
          a = {
        url: c,
        data: {
          cityname: t
        }
      };
      return (0, n.request)(a, "uncommon").then(function (t) {
        t.data.errCode === i.ERR_OK ? (app.globalData.gpsCityId = t.data.data.cityid, e.setData({
          cityId: t.data.data.cityid
        }), e.getPageData()) : uni.showToast({
          title: t.data.message,
          icon: "none",
          success: function () {
            return Promise.reject(t);
          }
        });
      }).catch(function (t) {
        console.log(t);
      });
    },
    getPageData: function () {
		console.log('get page data');
		
      var t = this,
          a = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "init";
      
	  var c = [],
	      l = [];
		  
	  this.getVolsRequest().then(function(result) {
		  if (result.data.success) {
	
			  c.volsCount = result.data.data;
			  c.displayNumArr = t.generateVolCount(c.volsCount);
		  
			  c.scrollList = t.getScrollList();
			  c.choiceList = t.getChoiceList();
			  c.navList = t.getNavList();
			  c.businessList = [];
			  c.navList.length < 9 && l.push(c.navList.slice(0, 9)), c.navList.length > 9 && c.navList.length < 18 && (l.push(c.navList.slice(0, 9)), l.push(c.navList.slice(9, 18))), t.setData({
			  		volsCount: c.volsCount,
			  		displayNumArr: c.displayNumArr,
			    bannerList: c.scrollList,
			    adsList: c.businessList,
			    choiceList: c.choiceList,
			    navList: l
			  });
		  }
	  });
	  this.getRecruitList().then(function (result) {
		
			if (result.data.success) {
				var u = [];
				result.data.data.rows.forEach(function (t) {
					var e = new Date().getTime();
					t.recruit_start_time = new Date(t.startTime).getTime();
					t.recruit_finish_time = new Date(t.endTime).getTime();
					if (t.recruit_start_time > e) t.lastTime = "即将开始"; else {
						var a = (0, i.calcLastTime)(t.recruit_finish_time);
						t.lastTime = a.day + "天" + a.hour + "小时";
					}
					t.distance = (t.distance / 1e3).toFixed(2);
					t.thumb = t.imageUrl ? host + "/sysFileInfo/preview?id=" + t.imageUrl : "/static/images/defaultorg.png";
					u.push(t);
				}), t.setData({
            actList: u
          }), "refresh" === a && uni.stopPullDownRefresh();
        }
      });
    },
    getVolsRequest: function () {
      var t = {
        data: {
          api: l,
        },
		method: 'get'
      };
      return (0, n.request)(t, 'normal');
    },
    getConfigures: function () {
      var t = {
        url: u,
        data: {
          city: this.cityId
        }
      };
      return (0, n.request)(t, "uncommon");
    },
    generateVolCount: function (t) {
      for (var e = String(t).split("").reverse(), a = [], i = 0; i < e.length; i++) a.unshift(e[i]), (i + 1) % 3 == 0 && i != e.length - 1 && a.unshift(",");

      return a;
    },
    getRecruitList: function () {
      var t = this;
      var u = {
        data: {
          api: d,
          pageNo: t.page,
          pageSize: 5,
		  x: app.globalData.longitude,
		  y: app.globalData.latitude,
        }
      };
      return (0, n.request)(u, "normal", !1);
    },
    toRecruit: function () {
      uni.navigateTo({
        url: "/pages/act/act"
      });
    },
    cityTransRequest: function (t) {
      var e = this,
          a = {
        url: g,
        data: {
          cityid: t
        }
      };
      (0, n.request)(a, "uncommon", !1).then(function (t) {
        if (t.data.errCode === i.ERR_OK) {
          var a = t.data.data,
              n = a.relation_province,
              r = a.relation_city,
              o = a.relation_county;
          e.setData({
            transProvince: n,
            transCity: r,
            transCounty: o
          });
        } else uni.showToast({
          title: t.data.message
        });
      }).catch(function (t) {
        console.log(t);
      });
    },
	getScrollList: function() {
		return [
			{
				thumb: 'http://image.zyh365.com/vms/2020/39//16010015871074b1291721824484889cdcdf4ea96558c?imageView2/2/w/750/h/360',
				url: "",
			}
		];
	},
	getChoiceList: function() {
		return [
			{
				url: "/pages/entry/register",
				title: '成为志愿者',
				backgroundColor: '#f6685e',
				thumb: "/static/images/fg1.png"
			}, {
				url: "",
				title: '组织入驻志愿汇',
				backgroundColor: '#ff9000',
				thumb: "/static/images/fg2.png"
			},
			{
				url: "",
				title: '多彩课堂',
				backgroundColor: '#22c482',
				thumb: "/static/images/fg3.png"
			},
			{
				url: "",
				title: '一镇街一品牌',
				backgroundColor: '#22c482',
				thumb: "/static/images/fg4.png"
			}
		];
	},
	getNavList: function() {
		return [
			
			{
				url: '/pages/act/act',
				title: '找活动',
				thumb: '/static/images/nav-icons/applay-volunteer.png',
			}, {
				url: '/pages/org/org',
				title: '找组织',
				thumb: '/static/images/nav-icons/apply-org.png',
			}, {
				url: '/pages/welfare/welfare',
				title: '兑商品',
				thumb: '/static/images/nav-icons/bank.png',
				needLogin: true,
			}, {
				url: '/pages/reserve/reserve',
				title: '定场馆',
				thumb: '/static/images/nav-icons/order-receiving.png',
				needLogin: true,
			}, {
				url: '/pages/team/team',
				title: '找队伍',
				thumb: '/static/images/nav-icons/service.png',
				needLogin: true,
			}, {
				url: '/pages/service/service',
				title: '找服务',
				thumb: '/static/images/2.png',
				needLogin: true,
			}, {
				url: '/pages/welfare/xax',
				title: '献爱心',
				thumb: '/static/images/nav-icons/public-service.png',
				needLogin: true,
			}, {
				url: '/pages/order/order',
				title: '找点单',
				thumb: '/static/images/1.png',
				needLogin: true,
			}
			
		];
	}
  }
};
</script>
<style lang="scss">
.container {
}
$primary-color: #24cba9;

.number-people {
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 22rpx 32rpx;
	justify-content: space-between;
	.number-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 86rpx;
		.number {
			font-size: 40rpx;
			font-weight: bold;
			margin-right: 18rpx;
			color: $primary-color;
		}
		.unit {
			font-size: 26rpx;
		
		}
	}
}

.new-list {
	position: relative;
	.news-more {
		background: #fff;
		position: absolute;
		width: 140rpx;
		height: 70rpx;
		z-index: 9999;
		right: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		view {
			font-size: 24rpx;
			margin-left: 20rpx;
			color: #666;
		}
		image {
			width: 12rpx;
			height: 20rpx;
			margin-right: 50rpx;
		}
	}
	.news-box {
		display: flex;
		flex-direction: row;
		padding: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	
		.cover {
			width: 212rpx;
			height: 160rpx;
		}
		.news-info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.meta{
				display: flex;
				flex-direction: row;
				
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
				view {
					color: #9ca1a7;
					font-size: 24rpx;
					line-height: 24rpx;
					margin-right: 15rpx;
				}
			
			}
		}
	}
}

.choice-box {
	width: 336rpx;
	height: 118rpx;
	background-color: #ffeed6;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
	color: #fff;
}
.top_view {
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    right: 0;
    left: 0;
    z-index: 999;
    height: 88rpx;
    padding: 20rpx 30rpx;
    justify-content: space-between;
    background: #fff;
}

.top_view .locate_sec {
    height: 48rpx;
    justify-content: flex-start;
}

.locate_sec image:nth-child(1) {
    flex: 0 0 24rpx;
    width: 24rpx;
    height: 34rpx;
}

.locate_sec image:nth-child(3) {
    flex: 0 0 22rpx;
    width: 22rpx;
    height: 12rpx;
}

.locate_sec view {
    flex: auto;
    line-height: 48rpx;
    margin: 0 12rpx;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 36rpx;
    color: #333;
}

.top_view .amount_sec {
    height: 36rpx;
    justify-content: flex-start;
}

.amount_sec .num_sec {
    flex: 0 0 28rpx;
    width: 28rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin-right: 4rpx;
    text-align: center;
    background: #f7f9f8;
    font-size: 40rpx;
    font-family: Arial,Helvetica,sans-serif;
    color: #24cba9;
}

.amount_sec .txt {
    font-size: 24rpx;
    color: #646464;
    vertical-align: bottom;
    margin-left: 10rpx;
}

.swiper_wrapper {
    width: 100%;
    height: auto;
}

.swiper_wrapper swiper {
    width: 100%;
    height: 280rpx;
}

.swiper_wrapper swiper swiper-item image {
    width: 100%;
    height: 100%;
}

.swiper_dots {
    width: 100%;
    height: 48rpx;
    line-height: 48rpx;
}

.swiper_dots .dot_item {
    flex: 0 0 6rpx;
    width: 6rpx;
    height: 6rpx;
    margin-right: 8rpx;
    background: #e4e4e5;
    border-radius: 50%;
    font-size: 0;
}

.swiper_dots .dot_item.active {
    flex: 0 0 14rpx;
    width: 14rpx;
    height: 12rpx;
    background: transparent;
    line-height: 12rpx;
    font-size: 0;
}

.swiper_dots .dot_item:last-child {
    margin-right: 0;
}

.dot_item.active image {
    width: 100%;
    height: 100%;
}

.nav_wrapper {
    width: 100%;
    height: auto;
    padding: 0 30rpx;
}

.nav_wrapper,.nav_wrapper swiper-item {
    justify-content: flex-start;
}

.nav_wrapper swiper-item {
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

.nav_item {
    flex: 0 0 25%;
    width: 25%;
    height: 168rpx;
    text-align: center;
    font-size: 0;
    padding-bottom: 14rpx;
}

.nav_item image {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 7rpx;
}

.nav_item view {
    font-size: 28rpx;
}

.ads_wrapper {
    width: 100%;
    height: auto;
    padding: 20rpx 0;
}

.ads_wrapper .ads_item {
    width: 100%;
    height: 160rpx;
    font-size: 0;
}

.ads_wrapper .ads_item+.ads_item {
    margin-top: 16rpx;
}

.ads_item image {
    width: 100%;
    height: 100%;
}

.choice_wrapper {
    width: 100%;
    height: auto;
    padding-left: 30rpx;
}

.choice_sec {
    justify-content: space-between;
    flex-wrap: wrap;
    padding-right: 30rpx;
    padding-bottom: 22rpx;
}

.choice_sec .choice_item {
    position: relative;
    flex: 0 0 336rpx;
    width: 336rpx;
    height: 130rpx;
    margin-bottom: 18rpx;
}

.choice_item:nth-child(2n+2) {
    margin-left: 18rpx;
}

.choice_item .tag {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    height: 36rpx;
    line-height: 36rpx;
    background: #ff946b;
    border-radius: 0 0 0 18rpx;
    padding: 0 10rpx 0 16rpx;
    font-size: 22rpx;
    color: #fff;
}

.choice_item image {
    width: 100%;
    height: 100%;
}

.sec_title {
    line-height: 40rpx;
    padding: 40rpx 30rpx 40rpx 0;
    font-size: 0rpx;
}

.sec_title image {
    flex: 0 0 40rpx;
    width: 40rpx;
    height: 40rpx;
    margin-right: 18rpx;
}

.sec_title .title {
    flex: auto;
    font-size: 40rpx;
    font-weight: 500;
    color: #333;
}

.sec_title .more {
    flex: 0 0 90rpx;
    align-self: flex-end;
    width: 90rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #666;
}

.sec_title .more image {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 20rpx;
    margin-left: 10rpx;
}

.recruit_wrapper {
    width: 100%;
    height: auto;
    padding-left: 30rpx;
}

.recruit_sec {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    padding-bottom: 40rpx;
}

.recruit_item {
    width: 100%;
    min-height: 240rpx;
    height: auto;
    padding-bottom: 40rpx;
    border-bottom: 1rpx solid #e1e2e3;
    margin-bottom: 40rpx;
}

.recruit_sec .recruit_item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.recruit_item .thumb {
    flex: 0 0 200rpx;
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
    border-radius: 8rpx;
    border: 1rpx solid #e1e2e3;
}

.recruit_item .desc {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.recruit_item .desc .title {
    max-width: 440rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-content: center;
    margin-bottom: 10rpx;
    font-size: 32rpx;
}

.recruit_item .tags {
    flex-wrap: wrap;
}

.recruit_item .tags,.recruit_item .tags .tag {
    justify-content: flex-start;
}

.recruit_item .tags .tag {
    flex: none;
    display: flex;
    flex-direction: row;
    height: 32rpx;
    line-height: 32rpx;
    padding: 0 10rpx;
    margin-right: 12rpx;
    margin-bottom: 10rpx;
    background: #f5f5f5;
    font-size: 24rpx;
    color: #777;
}

.tag.distance image {
    height: 16rpx;
}

.tag.amt image,.tag.distance image,.tag.locate image {
    flex: 0 0 16rpx;
    align-self: center;
    width: 16rpx;
}

.tag.amt image,.tag.locate image {
    height: 18rpx;
}

.tag.timeline image {
    flex: 0 0 20rpx;
    align-self: center;
    width: 20rpx;
    height: 20rpx;
}

.tag.timeline view {
    color: #00b99e;
}

.tag image {
    margin-right: 8rpx;
}

.desc .org_name {
    align-self: flex-end;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    height: 30rpx;
    line-height: 30rpx;
    margin-top: 20rpx;
    font-size: 0;
    color: #333;
}

.desc .org_name image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
}

.desc .org_name view {
    flex: auto;
    max-width: 410rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 24rpx;
}
</style>